<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="react.js"></script>
    <script src="react-dom.js"></script>
    <script src="browser.js"></script>
    <script type="text/babel">
        class Item extends React.Component {
          constructor(...args) {
            super(...args);
          }
          render(){
            return <li>{this.props.str}</li>;
          }
        }

        class List extends React.Component {
          constructor(...args) {
            super(...args);
          }
          render()
          {
            let aItems=[];

            aItems= this.props.arr.map(a=><Item str = {a}></Item>);

            return <ul>
                  {aItems}
            </ul>;
          }
        }



        window.onload=function()
        {
          let oDiv = document.getElementById('div1');

          ReactDOM.render(
          <List arr={['abc','111','33','999']}></List>,
            oDiv
          );
        };
    </script>
  </head>
  <body>
      <div id="div1"></div>
  </body>
</html>
